<template>
  <div id="page">
    <div class="header">
      <c-title :hide="false" text="数据展示"></c-title>
    </div>
    <div class="top">
      <!-- 数据 -->
      <div class="datacalss">
        <img src="../../../assets/images/hxt/bg1.png" class="image" alt="" />
        <!-- <image src="../../../image/hxt/bg1.png" mode="" class="image" /> -->
        <div class="datacon">
          <div class="data_li">
            <div class="num">{{ team_count }}</div>
            <div class="text">总团队人数</div>
          </div>
          <div class="data_li">
            <!-- <i style="font-size: 0.75rem">万</i> -->
            <div class="num">{{ team_performance }} </div>
            <div class="text">总业绩</div>
          </div>
          <div class="data_li">
            <div class="num">{{ order_count }}</div>
            <div class="text">总单量</div>
          </div>
        </div>
      </div>
      <!-- 导航 -->
      <div class="tabarr">
        <div class="tabli" :class="{ tab_active: tabInd == 0 }" @click="selectTab(0)">总粉丝人数</div>
        <div class="tabli" :class="{ tab_active: tabInd == 1 }" @click="selectTab(1)">服务费</div>
      </div>
    </div>

    <div class="content" >
      <div class="con" v-if="tabInd == 0">
        <div class="top_two">
          <div class="title">团队队员</div>
          <div class="peron">
            <div class="icon">
              <img src="../../../assets/images/hxt/per.png" class="image" />
            </div>
            <div class="per_num">总人数: {{ direct_count }}</div>
          </div>
        </div>

        <div class="conli" v-for="(it, ind) in direct_list" :key="ind">
          <div class="lt">
            <div class="ava">
              <img :src="it.avatar" alt="" class="image" >
            </div>
            <div class="beetw">
              <div class="name">{{ it.nickname }}</div>
              <div class="mob">{{ it.mobile }}</div>
            </div>
          </div>
          <div class="ri name">{{ it.level_name }}</div>
        </div>
      </div>

      <div class="con" v-if="tabInd == 1" style="padding: 1.25rem 0">
        <div class="top_two" style="border: none; padding: 0 0.9375rem 0.9375rem">
          <div class="title">服务费</div>
          <div class="day" @click="selectdayshow">
            <div class="day_name">{{ month }}</div>
            <div class="icon">
              <img src="../../../assets/images/hxt/xia.png" class="image" />
            </div>
          </div>
        </div>

        <div class="twoli" v-for="(it, ind) in rewardList" :key="ind">
          <div class="time">{{ it.create_month }}</div>
          <div class="bot">
            <div class="bot_le">
              <div class="type">{{ it.type_name }}</div>
              <div class="order">订单编号：{{ it.order_sn }}</div>
            </div>
            <div class="price">{{ it.dividend_amount }}</div>
          </div>
        </div>

      </div>
      <div class="d_class" v-if="tabInd == 1">
        <div class="dline"></div>
        <div class="d_text"><van-loading type="spinner" size="14px" v-if="!isLoding"/> <div style="margin-left: 4px">{{isLoding ? '暂无数据' : '加载中'}}</div> </div>
        <div class="dline"></div>
      </div>

    </div>

    <div class="popup" :class="{'popupshow':selecttime}">
      <!-- <div class="popup_top">
        <div class="top_le" @click="selectdayshow">取消</div>
        <div class="tit">请选择月份</div>
        <div class="top_ri" @click="selectdayshow('y')">确定</div>
      </div>
      <div class="scroll">
        <div class="popli " :class="{ 'popli_active':time == ind }" v-for="(it,ind) in 12" :key="ind" @click="selectDay(ind)" >{{ ind + 1 }}月</div>
      </div> -->
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="onConfirm"
        @cancel="selecttime=false"
      />
    </div>
    <div class="popupbg" @click="selectdayshow"  v-if="selecttime"></div>
  </div>
</template>
<script>
import dataDisplayController from "./dataDisplayController";

export default dataDisplayController;
</script>
<style lang="scss" scoped>
:deep(.van-nav-bar__title) {
  color: #000 !important;
}
/* packageK/hxt/dataDisplay/dataDisplay.wxss */
#page {
  background: #fff;
  min-height: 100vh;
}
div {
  box-sizing: border-box;
}
.top {
  padding: 0.94rem 0.94rem 0;
}
.image {
  width: 100%;
  height: 100%;
}
.datacalss {
  height: 6rem;
  width: 100%;
  border-radius: 1.5rem;
  position: relative;
}
.datacon {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  z-index: 66;
  color: #fff;
}
.data_li {
  flex: 1;
  text-align: center;
}
.data_li:nth-child(2) {
  border-right: 0.07rem solid #fff;
  border-left: 0.07rem solid #fff;
}
.num {
  font-weight: 700;
  font-size: 1.2rem;
}
.text {
  font-size: 0.75rem;
}

.tabarr {
  display: flex;
  align-items: center;
  /* padding: 40rem 0 20rem; */
  height: 3.125rem;
}
.tabli {
  flex: 1;
  text-align: center;
  font-size: 0.875rem;
  color: #666;
}
.tab_active {
  font-size: 1.0625rem;
  color: #000;
  position: relative;
  font-weight: 700;
}
.tab_active::after {
  content: "";
  position: absolute;
  bottom: -0.78125rem;
  left: 50%;
  transform: translate(-50%);
  width: 1rem;
  height: 0.125rem;
  border-radius: 0.0625rem;
  background: #1a6dfd;
}
.content {
  background: #ebf5ff;
  min-height: calc(100vh - 10.065rem - 40px);
  width: 100%;
  padding: 1.25rem 0.9375rem 1.5625rem;
  border-radius: 0.75rem 0.75rem 0 0;
}

.con {
  background: #fff;
  border-radius: 0.75rem;
  padding: 1.25rem 0.9375rem;
}
.top_two {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.9375rem;
  border-bottom: 0.029375rem solid #ebf5ff;
}
.title {
  font-size: 1rem;
  font-weight: 700;
}
.peron {
  display: flex;
  align-items: center;
}
.peron .icon {
  width: 1rem;
  height: 0.81rem;
  margin-right: 0.16rem;
  display: flex;
  align-items: center;
}
.per_num {
  font-size: 0.94rem;
}
.day {
  width: 5.63rem;
  height: 1.75rem;
  border-radius: 0.25rem;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.day_name {
  font-size: 0.81rem;
  color: #394052;
}
.day .icon {
  width: 0.38rem;
  height: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.28rem;
}

.conli {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border-top:1rem solid #EBF5FF ; */
  border-bottom: 0.029375rem solid #ebf5ff;
  padding: 0.53rem 0;
}
.con .lt {
  display: flex;
  align-items: center;
}
.ava {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  // background: pink;
  margin-right: 0.5rem;
  overflow: hidden;
}
.beetw {
  text-align: left;
}
.name {
  font-size: 0.81rem;
  font-weight: 700;
}
.mob {
  font-size: 0.75rem;
  color: #373e50;
}

.time {
  height: 1.5rem;
  background: #f2f7ff;
  font-size: 0.63rem;
  color: #999999;
  line-height: 1.5rem;
  padding: 0 0.9375rem;
  border-top: 0.029375rem solid #f2f7ff;
  text-align: left;
}

.bot {
  height: 3.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.9375rem;
  border-top: 0.029375rem solid #f2f7ff;
  text-align: left;
}
.type {
  font-size: 0.81rem;
  font-weight: 700;
}
.order {
  font-size: 0.63rem;
  color: #999999;
  margin-top: 0.38rem;
}
.price {
  font-size: 1.13rem;
  font-weight: 700;
}

.popup {
  width: 100%;
  height: 60vh;
  position: fixed;
  bottom: -60vh;
  left: 0;
  border-radius: 0.5rem 0.5rem 0 0;
  background-color: #fff;
  z-index: 6666;
  padding: 0.9375rem 0.9375rem 1.25rem;
  /* display: none; */
  transition: bottom 0.5s ease-in-out;
}
.popupshow {
  /* display: block; */
  bottom: 0;
}

.popupbg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #000;
  opacity: 0.5;
  z-index: 77;
}
.popup .popup_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2rem;
  border-bottom: 0.029375rem solid #f5f5f5;
  padding-bottom: 0.9375rem;
}
.popup .popup_top .top_le {
  font-size: 0.81rem;
  color: #999;
}
.popup .popup_top .top_ri {
  font-size: 0.81rem;
  color: #2979ff;
}
.popup .popup_top .tit {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 2rem;
}
.scroll {
  height: calc(100% - 2em);
  overflow-y:auto ;
}
.popli {
  height: 3rem;
  text-align: center;
  line-height: 3rem;
  font-size: 0.88rem;
  border-bottom: 0.029375rem solid #f5f5f5;
}
.popli_active {
  color: #1a6dfd;
  font-weight: 700;
}
.d_class{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
}
.dline{
  width: 3rem;
  height: 0.01rem;
  background: #ccc;
}
.d_text{
  margin: 0 1rem;
  display: flex;
  align-items: center;
}
</style>

